<template>
  <div class="leftchild11">
    <header>
      <li>
        <router-link to="/"><span>工作台</span></router-link>
      </li>
      &nbsp;
      <li>/</li>
      &nbsp;
      <li>搜索记录</li>
    </header>
    <main>
      <div class="top">
        <div class="top-top">
          <a-form
            :model="formState"
            :label-col="labelCol"
            :wrapper-col="wrapperCol"
          >
            <a-form-item label="类型：">
              <a-input
                v-model:value="formState.type"
                placeholder="请输入搜索类型"
              />
            </a-form-item>

            <a-form-item label="搜索词:">
              <a-input
                v-model:value="formState.word"
                type="textarea"
                placeholder="请输入搜索词"
              />
            </a-form-item>

            <a-form-item label="搜索量:">
              <a-input
                v-model:value="formState.num"
                type="textarea"
                placeholder="请输入搜索量"
              />
            </a-form-item>
          </a-form>
        </div>
        <div class="top-bottom">
          <div style="width: 240px">
            <a-form-item :wrapper-col="{ span: 14, offset: 4 }">
              <a-button type="primary" @click="onSubmit">搜索</a-button>
              <a-button style="margin-left: 10px" @click="resetting"
                >重置</a-button
              >
            </a-form-item>
          </div>
        </div>
      </div>
      <div class="middle">
        <div class="m-top">
          <div v-if="state.flag"><a-button danger>删除</a-button></div>
          <div v-if="!state.flag"></div>
          <a-popover>
            <template #content>
              <p color="#fff">刷新</p>
            </template>
            <a href=""><ReloadOutlined /></a>
          </a-popover>
        </div>
        <div class="m-middle">
          <a-table
            :columns="columns"
            :data-source="state.data"
            :row-selection="rowSelection"
          >
            <template #action>
              <span style="color: #7790ff; cursor: pointer">
                <a-popconfirm
                  title="确认删除这个标签"
                  ok-text="确认"
                  cancel-text="取消"
                  @confirm="confirm"
                  @cancel="cancel"
                >
                  <a>删除</a>
                </a-popconfirm>
              </span>
            </template>
          </a-table>
        </div>
      </div>
    </main>
  </div>
</template>

<script lang="ts">
import { defineComponent, reactive, toRaw, UnwrapRef } from 'vue'
interface FormState {
  type: string
  num: string
  word: string
}
import { ReloadOutlined } from '@ant-design/icons-vue'
import { message } from 'ant-design-vue'

const columns = [
  {
    title: '搜索词',
    dataIndex: 'usename',
    key: 'usename'
  },
  {
    title: '搜索量',
    dataIndex: 'num',
    key: 'num'
  },
  {
    title: '搜索时间',
    dataIndex: 'row',
    key: 'row'
  },
  {
    title: '操作',
    dataIndex: '操作',
    key: 'address',
    slots: { customRender: 'action' } //绑定插槽
  }
]
interface DataItem {
  key: number
  type: string
  word: number
  row: string
  children?: DataItem[]
}

export default defineComponent({
  components: {
    ReloadOutlined
  },
  setup() {
    let state: any = reactive({
      data: [
        {
          key: 1,
          usename: '1211',
          num: 60,
          row: '2018-11-14'
        },
        {
          key: 2,
          usename: '2822',
          num: 1,
          row: '2018-11-14'
        },
        {
          key: 3,
          usename: '0233',
          num: 0,
          row: '2018-11-14'
        },
        {
          key: 4,
          usename: '4324',
          num: 6,
          row: '2018-11-14'
        }
      ],
      flag: false
    })
    const rowSelection = {
      onChange: (
        selectedRowKeys: (string | number)[],
        selectedRows: DataItem[]
      ) => {
        if (selectedRows.length == 0) {
          state.flag = false
        } else {
          state.flag = true
        }
      },
      onSelect: (
        record: DataItem,
        selected: boolean,
        selectedRows: DataItem[]
      ) => {
        console.log(record, selected, selectedRows)
      },
      onSelectAll: (
        selected: boolean,
        selectedRows: DataItem[],
        changeRows: DataItem[]
      ) => {
        console.log(selected, selectedRows, changeRows)
      }
    }
    const formState: UnwrapRef<FormState> = reactive({
      type: '',
      num: '',
      word: ''
    })
    const onSubmit = () => {
      console.log('submit!', toRaw(formState))
      const newList = state.data.filter((item: any) =>
        item.usename.includes(formState.word)
      )
      state.data = newList
    }
    let resetting = () => {
      formState.type = ''
      formState.word = ''
      formState.num = ''
    }
    const confirm = (e: MouseEvent) => {
      console.log(e)
      message.warning('访客无权进行该操作')
    }
    const cancel = (e: MouseEvent) => {
      console.log(e)
    }
    return {
      state,
      labelCol: { span: 4 },
      wrapperCol: { span: 14 },
      formState,
      onSubmit,
      resetting,
      columns,
      rowSelection,
      cancel,
      confirm
    }
  }
})
</script>

<style lang="scss">
.leftchild11 {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  overflow: hidden;

  header {
    height: 10%;
    padding-left: 10px;
    display: flex;
    align-items: center;
    background: #fff;
    border-top: 1px solid #eae2e2;

    li {
      cursor: pointer;
      color: #999;

      span {
        color: #999;
      }
    }
  }

  main {
    flex-grow: 1;
    overflow-y: scroll;

    .top {
      width: 97%;
      height: 120px;
      background: #fff;
      margin: 2% auto;
      padding-top: 20px;

      .top-top {
        height: 50%;
        display: flex;
        align-items: center;

        .ant-form {
          display: flex;
          justify-content: space-around;

          input {
            width: 200px;
          }

          .ant-col {
            width: 170px;
          }
        }

        .ant-select-selector {
          width: 200px;
        }

        .ant-select {
          width: 200px;
        }

        .ant-select-arrow {
          float: right;
        }
      }

      .top-bottom {
        display: flex;
        justify-content: flex-end;
      }
    }

    .middle {
      width: 97%;
      background: #fff;
      margin: 3% auto;

      .m-top {
        height: 40px;
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding-right: 20px;
        cursor: pointer;
        button {
          margin-left: 10px;
        }
      }

      .m-middle {
        height: 84%;

        .ant-table-row {
          td {
            &:nth-child(3) {
              color: green;
            }
          }
        }
      }
    }

    .btn2 {
      margin-left: 13px;
    }
  }
}
</style>
